<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">
			<form action="http://www.baidu.com">
				<div>
					<span>用户名:</span>
					<span>
						<input name="username" type="text" v-model="username"/>
					</span>
				</div>
				
				<div>
					<span>姓别:</span>
					<span>
						<!-- label相当于合并为一个div需要id-for进行关联 -->
						<input name="gender" type="radio" value="男" id="man" v-model="gender"/>
						<label for="man">男</label>
						<input name="gender" type="radio" value="女" id="woman"/>
						<label for="woman">女</label>
					</span>
				</div>
				
				<div>
					<span>爱好:</span>
					<span>
						<!-- label相当于合并为一个div需要id-for进行关联 -->
						<input name="hobby" type="checkbox" value="敲代码" v-model="hobbys"/>敲代码
						<input name="hobby" type="checkbox" value="打游戏" v-model="hobbys"/>打游戏
						<input name="hobby" type="checkbox" value="看电视" v-model="hobbys"/>看电视
					</span>
				</div>
				
				<div>
					<span>部门:</span>
					<span>
						<!-- 设定下拉框多选 -->
						<select name="dept" v-model="dept" multiple="true">
							<option value ="财务部">财务部</option>
							<option value ="测试部">测试部</option>
							<option value ="研发部">研发部</option>
						</select>
					</span>
				</div>
				
				<div>
					<span>用户详情:</span>
					<span>
						<textarea rows="155" cols="50" v-model="text">
						</textarea>
						
					</span>
				</div>
				
				<div>
					<!-- 让默认的行为失效 -->
					<button @click.prevent="submit">提交</button>	
				</div>
			</form>
			
		</div>
			
			
			<script src="../js/vue.js"></script>
			<script>
				const app=new Vue({
					el:"#app",
					data:{
						username:'',
						gender:'男',
						hobbys:['敲代码','看电视'],
						//定义下拉框
						// dept:'财务部'
						dept:['财务部','研发部'],
						text:'请输入'
					},
					methods:{
						submit(){
							console.log("username数据："+this.username)
						}
					}
				})
				
			</script>
	</body>
</html>
